<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=data-transform-sort-bar
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
-->

<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};

    var option;

    var list = [
        [' Hannah Krause ', 41, 42],
        ['Zhao Qian ', 20, 25],
        ['Li Lei', 37, 56],
        [' Karle Neumann ', 25, 66],
    ];
    option = {
        title: {
            left: 'center',
            text: 'OD客流数据分析',
            subtext: "Start from " + startSta + " " + year + "-" + month,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#283b56'
                }
            }
        },
        dataset: [{
            dimensions: ['name', 'in', 'out'],
            source: list
        },

            {
                transform: {
                    type: 'sort',
                    config: {dimension: 'in', order: 'desc'}
                }
            }],
        xAxis: {
            type: 'category',
            axisLabel: {interval: 0, rotate: 30},
        },
        yAxis: {},
        dataZoom: [{
            type: 'inside',
            start: 0,
            end: 10
        }, {
            type: 'slider',
            xAxisIndex: 0,
            minSpan: 5,
            bottom: 10
        }],

        series: [{
            type: 'bar',
            encode: {x: 'name', y: 'in'},
            datasetIndex: 1
        },
            {
                type: 'bar',
                encode: {x: 'name', y: 'out'},
                datasetIndex: 1
            },]

    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

</script>
</body>
</html>
